<template>
  <div class="data_type_set">
    <div>
      <h3>{{$t('configLazyLoad.qualityCheck.dataTypeRequired')}}</h3>
      <el-radio-group v-model="changeMonitorType" class="changeMonitorType">
        <el-radio :label="'enable'">{{$t('public.yes')}}</el-radio>
        <el-radio :label="'disable'">{{$t('public.no')}}</el-radio>
        <el-button class="primary_btn change_btn" type="primary" @click.prevent="saveChangeMonitor">{{$t('public.save')}}</el-button>
      </el-radio-group>
    </div>
    <div class="data_type_title clearBoth">
      <h3>{{$t('configLazyLoad.qualityCheck.nowDataType')}}</h3>
      <el-button class="primary_btn add_btn" type="text" @click.stop="addFormLi" icon="el-icon-plus">{{$t('public.add')}}</el-button>
    </div>
    <div class="form_data_box">
      <el-form :model="dataTypeForm" ref="dataTypeForm">
        <el-form-item v-for="(dataLi, index) in dataTypeForm.dataLi" class="dataTypeFormLi">
          <el-input class="form_li_input" :maxlength="8" v-model.trim="dataLi.name" @focus="editorData(index)"></el-input>
          <el-button class="primary_btn" v-show="focusLiIndex === index && !showAdd" @click.prevent="cancelUpdate(index)">{{$t('public.cancel')}}</el-button>
          <el-button class="primary_btn" type="primary" v-show="focusLiIndex === index && !showAdd " @click.prevent="updateDataLi(dataLi)">{{$t('public.save')}}</el-button>
        </el-form-item>
        <el-form-item class="dataTypeFormLi">
          <div v-show="showAdd">
            <el-input v-model.trim="dataTypeForm.addForm.name" :maxlength="8" class="form_li_input"></el-input>
            <el-button class="primary_btn" @click.prevent="cancel">{{$t('public.cancel')}}</el-button>
            <el-button class="primary_btn" type="primary" @click.prevent="addQualityCheckMonitor">{{$t('public.save')}}</el-button>
          </div>
        </el-form-item>
      </el-form>
    </div>
  </div>
</template>

<script>
  import {
    deepClone
  } from '@/utils/m7Utils'

  function queryQualityCheckMonitorTypeConfig (store, data) {
    return store.dispatch('queryQualityCheckMonitorTypeConfig', data)
  }

  function addQualityCheckMonitorType (store, data) {
    return store.dispatch('addQualityCheckMonitorType', data)
  }
  export default {
    name: 'DataType',
    data () {
      return {
        changeMonitorType: 'enable',
        dataTypeForm: {
          dataLi: [],
          addForm: {
            'name': ''
          }
        },
        dataLiClone: [],
        focusLiIndex: -1,
        showAdd: false
      }
    },
    computed: {
      account () {
        return this.$store.state.session.account.account
      }
    },
    methods: {
      editorData (index) {
        this.refresh()
        this.showAdd = false
        this.focusLiIndex = index
      },
      updateDataLi (obj) {
        if (!obj.name) {
          this.$message.error(this.$t('public.noEmpty'))
          return
        }
        let data = {
          name: obj.name,
          _id: obj._id,
          account: obj.account
        }
        addQualityCheckMonitorType(this.$store, data).then((res) => {
          if (res.success) {
            this.$message.success(res.message)
            this.focusLiIndex = -1
          }
        })
      },
      cancelUpdate (index) {
        this.dataTypeForm.dataLi.splice(index, 1, deepClone(this.dataLiClone[index]))
        this.focusLiIndex = -1
      },
      refresh () {
        queryQualityCheckMonitorTypeConfig(this.$store, this.account).then((res) => {
          if (res.success) {
            this.dataTypeForm.dataLi = res.list
            this.dataLiClone = deepClone(res.list)
          }
        })
      },
      addQualityCheckMonitor () {
        if (!this.dataTypeForm.addForm.name) {
          this.$message.error(this.$t('qualityCheck.monnityType') + this.$t('public.noEmpty'))
          return
        }
        let data = {
          _id: '',
          name: this.dataTypeForm.addForm.name,
          account: this.account
        }
        addQualityCheckMonitorType(this.$store, data).then((res) => {
          if (res.success) {
            this.$message.success(res.message)
            this.showAdd = false
            this.refresh()
            this.cancel()
          }
        })
      },
      cancel () {
        this.showAdd = false
        this.dataTypeForm.addForm.name = ''
      },
      addFormLi () {
        this.showAdd = true
      },
      saveChangeMonitor () {
        this.$store.dispatch('updateQualityCheckMointorTypeStatus', {status: this.changeMonitorType}).then((res) => {
          if (res && res.success) {
            this.$message.success(this.$t('configLazyLoad.qualityCheck.saveSuccess'))
          }
        })
      }
    },
    beforeMount () {
      this.refresh()
      this.$store.dispatch('getDicCache', {'type': 'qualityCheckMonitorTypeStatus'}).then((res) => {
        if (res && res.success) {
          this.changeMonitorType = res.data
        }
      })
    }
  }
</script>

<style lang="stylus" scoped>
  .changeMonitorType
    padding 10px 0px 10px 20px
    width 480px
  .change_btn
    float right
    height 24px
    line-height 24px
  .data_type_set
    overflow auto
    padding 16px
    height calc(100vh - 154px)
    .form_data_box
      padding-left 20px
  .dataTypeFormLi
    width 700px
  .form_li_input
    width calc(100% - 220px)
    margin-right 20px
  .data_type_title
    width 500px
    line-height 30px
    .add_btn
      float right
    h3
      display inline-block
</style>
